<template>
  <div class="editperson">
    <div class="editform">
      <form @submit.prevent="editform()">
        <p>
          <input type="text" placeholder="请输入注册姓名" required v-model.lazy.trim="objF.uname">
        </p>
        <aside>
          <input type="radio" value="0" name="gender" v-model="objF.gender"><span>女</span>
          <input type="radio" value="1" name="gender" v-model="objF.gender"><span>男</span>
        </aside>
        <p>
          <input type="number" min="18" max="70" placeholder="请输入年龄" required v-model.lazy.trim="objF.age">
        </p>
        <p>
          <!-- 将v-model所获取到的value值转换成数字类型数据 -->
          <select required v-model="objF.port">
            <option value="" disabled>--请选择职务--</option>
            <option value="1">老板</option>
            <option value="2">总经理</option>
            <option value="3">部门主管</option>
            <option value="4">组长</option>
            <option value="5">员工</option>
          </select>
        </p>
        <p>
          <input type="number" min="2500" placeholder="请输入薪资" required v-model.lazy.trim="objF.salary">
        </p>
        <p>
          <input type="date" placeholder="请选择入职日期" v-model="objF.ctime" required>
        </p>
        <article>
          <input type="submit" value="添加数据">
        </article>
      </form>
    </div>
  </div>
</template>

<script>
// map方法：是vue3对于vuex的快捷应用方式
import{mapMutations, mapState} from 'vuex';

export default {
    name:'EditPerson',
    data(){
      return{
        objF:{
          uname:'',
          gender:0,
          age:18,
          port:'',
          salary:2500,
          ctime:'2025-01-02'
        }
      }
    },
    computed:{
        ...mapState(['plist']),
    },
    // 生命周期函数
    mounted(){
        this.ind=this.$route.query.i;
        let obj =this.plist[this.ind];

        this.objF={
            uname:obj.uname,
            gender:obj.gender,
            age:obj.age,
            port:obj.port,
            salary:obj.salary,
            ctime:obj.ctime
        }
    },
    methods:{
        ...mapMutations(['editlist']),
    //  提交表单事件
    editform(){
        let nowtime =new Date().getTime();
        let Ctime =new Date(this.objF.ctime).getTime();
        if(Ctime>nowtime){
            alert('入职时间不得高于当前时间');
            return
        }

        this.editlist({val:this.objF,id:this.ind});
       
        
    }
    }
}
</script>

<style scoped>
.editperson{
  width: 100%;
  height: 100%;
  position: relative;
  text-align: center;
}
.editperson .editform{
  width: 60%;
  overflow: hidden;
  box-shadow: 0px 0px 5px;
  border-radius: 8px;
  position: absolute;
  margin: 25px auto;
  margin-left: 20%;
  margin-top: 10%;
}
.editerson .editform p,
.editperson .editorm article{
  width: 100%;
  display: flex;
  justify-content: center;
  height: 50px;
  margin-top: 25px;
}
.editperson .editform article input{
  width: 80%;
  height: 60px;
  margin-bottom: 25px;
}
.editperson .editform aside{
  width: 100%;
  display: flex;
  align-items: center;
  height: 50px;
  justify-content: center;
}
.editperson .editform aside span{
  margin-left: 6px;
  margin-right: 30px;
}
.editperson .editform p input{
  width: 80%;
  height: 70%;
}
.editperson .editform p select{
  width: 80%;
  border-radius: 6px;
}
</style>